<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// 模拟家具数据
const furnitureItems = [
  {
    id: 1,
    name: '舒适布艺沙发',
    price: 3999,
    images: [
      'https://picsum.photos/id/1067/600/400',
      'https://picsum.photos/id/1068/600/400',
      'https://picsum.photos/id/1069/600/400'
    ],
    category: '沙发',
    description: '温暖的布艺沙发，柔软舒适，适合家庭休闲时光。采用亲肤面料，触感柔和，久坐不累。简约设计，轻松融入各种家居风格。',
    features: ['亲肤面料', '柔软舒适', '简约设计', '稳固结构'],
    dimensions: '220cm x 90cm x 85cm',
    material: '面料: 棉麻混纺, 框架: 实木'
  },
  {
    id: 2,
    name: '木质单人床架',
    price: 5999,
    images: [
      'https://picsum.photos/id/1060/600/400',
      'https://picsum.photos/id/1061/600/400',
      'https://picsum.photos/id/1062/600/400'
    ],
    category: '床',
    description: '简约木质床架，温暖自然，营造舒适睡眠环境。采用优质实木，结构稳固，承重性好。表面经过精细打磨，触感光滑。',
    features: ['实木材质', '稳固结构', '精细工艺', '自然质感'],
    dimensions: '180cm x 200cm x 45cm',
    material: '框架: 橡木, 床板: 多层板'
  },
  {
    id: 3,
    name: '橡木餐桌套装',
    price: 7999,
    images: [
      'https://picsum.photos/id/174/600/400',
      'https://picsum.photos/id/175/600/400',
      'https://picsum.photos/id/176/600/400'
    ],
    category: '餐桌',
    description: '实木餐桌套装，温馨自然，适合家庭用餐。桌面采用优质橡木，纹理美观，耐用性强。桌腿设计简洁，稳固支撑。',
    features: ['实木材质', '美观纹理', '稳固结构', '易于清洁'],
    dimensions: '160cm x 80cm x 75cm',
    material: '桌面: 橡木, 桌腿: 实木'
  },
  {
    id: 4,
    name: '休闲靠背椅',
    price: 1999,
    images: [
      'https://picsum.photos/id/1029/600/400',
      'https://picsum.photos/id/1030/600/400',
      'https://picsum.photos/id/1031/600/400'
    ],
    category: '椅子',
    description: '舒适的休闲椅，温暖色调，适合阅读和放松。采用人体工学设计，靠背贴合背部曲线，提供良好支撑。',
    features: ['人体工学', '舒适靠背', '温暖色调', '轻盈设计'],
    dimensions: '75cm x 70cm x 85cm',
    material: '面料: 棉麻, 框架: 实木'
  }
]

const route = useRoute()
const router = useRouter()
const furniture = ref(null)
const currentImageIndex = ref(0)

// 获取家具详情
onMounted(() => {
  const id = parseInt(route.params.id)
  furniture.value = furnitureItems.find(item => item.id === id)
  if (!furniture.value) {
    router.push('/')
  }
})

// 切换图片
const changeImage = (index) => {
  currentImageIndex.value = index
}

// 返回列表
const backToList = () => {
  router.go(-1)
}
</script>

<template>
  <div v-if="furniture" class="detail-container">
    <button @click="backToList" class="back-btn">返回列表</button>

    <div class="furniture-detail">
      <div class="image-gallery">
        <img :src="furniture.images[currentImageIndex]" alt="{{ furniture.name }}" class="main-image" />
        <div class="thumbnails">
          <img
            v-for="(img, index) in furniture.images"
            :key="index"
            :src="img"
            alt="{{ furniture.name }} - 图片{{ index + 1 }}"
            :class="{ active: currentImageIndex === index }"
            @click="changeImage(index)"
          />
        </div>
      </div>

      <div class="info">
        <h2>{{ furniture.name }}</h2>
        <p class="category">{{ furniture.category }}</p>
        <p class="price">¥{{ furniture.price }}</p>
        <p class="description">{{ furniture.description }}</p>

        <div class="features">
          <h3>产品特点</h3>
          <ul>
            <li v-for="feature in furniture.features" :key="feature">{{ feature }}</li>
          </ul>
        </div>

        <div class="specifications">
          <h3>规格参数</h3>
          <p><strong>尺寸:</strong> {{ furniture.dimensions }}</p>
          <p><strong>材质:</strong> {{ furniture.material }}</p>
        </div>

        <button @click="$emit('bookNow', furniture.id)" class="book-btn">立即预约</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.back-btn {
  padding: 8px 16px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 20px;
}

.furniture-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.image-gallery {
  flex: 1;
  min-width: 300px;
}

.main-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 8px;
}

.thumbnails {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.thumbnails img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 4px;
  border: 2px solid transparent;
}

.thumbnails img.active {
  border-color: #42b883;
}

.info {
  flex: 1;
  min-width: 300px;
}

.info h2 {
  margin-top: 0;
  color: #333;
}

.category {
  color: #666;
  font-size: 14px;
  margin: 5px 0;
}

.price {
  color: #e74c3c;
  font-weight: bold;
  font-size: 24px;
  margin: 5px 0 15px 0;
}

.description {
  color: #333;
  margin-bottom: 20px;
  line-height: 1.6;
}

.features h3,
.specifications h3 {
  color: #333;
  margin-bottom: 10px;
}

.features ul {
  list-style-type: disc;
  padding-left: 20px;
  margin-bottom: 20px;
}

.features li {
  margin-bottom: 5px;
  color: #666;
}

.specifications p {
  margin-bottom: 10px;
  color: #666;
}

.book-btn {
  padding: 12px 24px;
  background-color: #42b883;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.3s;
  margin-top: 20px;
}

.book-btn:hover {
  background-color: #359469;
}
</style>